<script setup>
import {computed, ref} from "vue";
import {useRoute} from "vue-router";
import VChart from "vue-echarts";
import {http} from "@/api";

const routeList = ref([
  {
    name: '温度数据',
    code: 'temperature-data',
    unit: '℃'
  },
  {
    name: '气压数据',
    code: 'pressure-data',
    unit: 'Pa'
  },
  {
    name: '湿度数据',
    code: 'humidity-data',
    unit: '%'
  },
  {
    name: '辐照度数据',
    code: 'radiation-data',
    unit: 'W/m²'
  },
  {
    name: '总光伏功率数据',
    code: 'total-photovoltaic-power-data',
    unit: 'MV'
  },
  {
    name: '储能无功数据',
    code: 'storage-reactive-power-data',
    unit: 'MVAr'
  },
  {
    name: '储能有功数据',
    code: 'storage-active-power-data',
    unit: 'MW'
  },
  {
    name: '可充电量数据',
    code: 'rechargeable-amount-data',
    unit: 'kWh'
  },
  {
    name: '可放电量数据',
    code: 'dischargeable-amount-data',
    unit: 'kWh'
  },
  {
    name: '电池荷电量数据',
    code: 'battery-charge-amount-data',
    unit: 'kWh'
  }
])
const route = useRoute()
const routeItem = computed(() => {
  return routeList.value.find(item => item.code === route.name) || {}
})

const option1 = ref(  {
  backgroundColor: "#FFF",
  grid: {
    top: "50",
    bottom: "20",
    left: "50",
    right: "50",
    containLabel: true
  },
  tooltip: {
    trigger: "axis",
    label: {
      show: true,
    },
  },
  xAxis: {
    boundaryGap: true, //默认，坐标轴留白策略
    axisLine: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
      alignWithLabel: true,
    },
    data: [

    ],
  },
  yAxis: {
    name: '单位：' + routeItem.value.unit,
    axisLine: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(33,148,246,0.2)",
      },
    },
    axisTick: {
      show: false,
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: "rgb(245,250,254)",
      },
    },
  },
  series: [
    {
      type: "line",
      symbol: "circle",
      symbolSize: 2,
      smooth: false,
      lineStyle: {
        color: "rgb(33,148,246)",
      },
      itemStyle: {
        color: "rgb(33,148,246)",
        borderWidth: 1,
      },
      data: [

      ],
    },
  ],
})
const timeData = ref([])

function search() {
  const query = {
    type: routeItem.value.code,
  }
  if (timeData.value && timeData.value.length) {
    query.startTime = timeData.value[0]
    query.endTime = timeData.value[1]
  }
  http.dataQuery.list({
    ...query
  }).then(res => {
    option1.value.xAxis.data = res.data.map(el => el.name)
    option1.value.series[0].data = res.data.map(el => el.value)
  })
}
search()
</script>

<template>
  <el-main>
    <el-card shadow="never" style="height: 100%;">
      <template #header>
        <div class="card-header">
          <span>数据查询 -- {{ routeItem.name }}</span>
        </div>
      </template>
      <div style="flex-shrink: 0">
        <el-form inline>
          <el-form-item label="时间">
            <el-date-picker
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 500px"
                v-model="timeData"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" plain @click="timeData = []">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="flex-grow: 1">
        <v-chart ref="echartsRef2" class="chart" style="height: 100%" :option="option1" autoresize />
      </div>
    </el-card>
  </el-main>
</template>

<style scoped lang="scss">

</style>